/*
* @Description:可视化-交易折线图
* @Author: lil
* @Date: 2021/11/27
**/
<template>
  <div class="dealLineChart">
    <div id="dealLineChart" style="width:100%;height:256px"></div>
  </div>
</template>
<script>
  import {
    invokeBlockNumber
  } from '@/api/blockchain/blockchainvisualization'
  export default {
    data() {
      return {
        myChart: '',
        invokeData: [],
        blockData: []
      };
    },
    mounted() {
      this.getAllInvokeBlockInfo();
      this.drawLine();
    },
    methods: {
      getAllInvokeBlockInfo() {
        invokeBlockNumber().then((res) => {

          for (let i = 0; i < res.data.length; i++) {
            this.invokeData.push(res.data[i].invokeCount);
            this.blockData.push(res.data[i].blockCount);
          }
          this.myChart.setOption({
            series: [{
                name: '交易量',
                data: this.invokeData,
                type: 'line',
                showSymbol: false,
                smooth: true,
                itemStyle: {
                  normal: {
                    // color: '#c7f2ff',
                    color: '#e93ca7',
                    borderColor: '#5fdbff',
                    borderWidth: 2,
                    label: {
                      show: false
                    },
                    lineStyle: {
                      width: 2,
                      type: 'solid',
                      color: '#e93ca7',
                    },
                    areaStyle: {
                      color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                          offset: 0,
                          color: 'rgba(233,60,167,0.5)'
                        }, {
                          offset: 1,
                          color: 'rgba(148,108,212, 0)'
                        }],
                        global: false
                      }
                    },
                  }
                },
              },
              {
                name: '区块量',
                data: this.blockData,
                type: 'line',
                showSymbol: false,
                smooth: true,
                itemStyle: {
                  normal: {
                    color: '#5291f7',
                    borderColor: '#5fdbff',
                    borderWidth: 2,
                    label: {
                      show: false
                    },
                    lineStyle: {
                      width: 2,
                      type: 'solid',
                      color: '#5291f7',
                    },
                    areaStyle: {
                      color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                          offset: 0,
                          color: 'rgba(67,154,255, 0.3)'
                        }, {
                          offset: 1,
                          color: 'rgba(155,104,208, 0)'
                        }],
                        global: false
                      }
                    },
                  }
                },
              }
            ]
          });

        }).catch((err) => {
          console.log(err);
        });
      },

      drawLine() {
        this.myChart = this.$echarts.init(document.getElementById('dealLineChart'));
        this.myChart.setOption({
          grid: {
            top: '13%',
            left: '2%',
            right: '5%',
            bottom: '2%',
            containLabel: true
          },
          color: ['#e93ca7', '#5291f7'],
          legend: {
            itemWidth: 7,
            itemHeight: 2,
            right: 10,
            icon: 'rect',
            textStyle: {
              // color: ['#e93ca7', '#5291f7'],
              color: 'rgba(161,161,225,.5)',
            },
            padding: [1, 0, 0, 0],
            data: ['交易量', '区块量'],
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(209,209,252,.4)'
              }
            },
            axisLabel: {
              show: true,
              rotate: 45
            },
            data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00']
          },
          yAxis: {
            type: 'value',
            name: '数据量',
            minInterval: 1,
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(209,209,252,.4)'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#252c49'
              }
            }
          },

        });
        window.onresize = () => {
          this.myChart.resize();
        }
      }
    },
  }

</script>
<style lang="scss" scoped>
  .dealLineChart {
    margin-top: 50px;
    padding-left: 10px;
  }

</style>
